<template>
  <div class="my-video">
    <div class="top">
      <div class="top-item">
        <div class="count">{{ detail.last_month_view }}</div>
        <div class="count-label">上月浏览量</div>
      </div>
      <div class="top-item">
        <div class="count large">{{ detail.current_month_view }}</div>
        <div class="count-label">本月浏览量</div>
      </div>
      <div class="top-item">
        <div class="count">{{ detail.sum_push }}</div>
        <div class="count-label">已发布视频</div>
      </div>
    </div>
    <div class="content">
      <div class="title">我的作品</div>
      <p class="title-line"></p>
      <div class="list">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div 
            @click="imagePreview(item.video_url, item.video_cover_url)"
            class="item-top" 
            :style="{backgroundImage: 'url(' + item.video_cover_url + ')'}">
            <!-- <div class="date">2022年12月13日</div> -->
            <div class="play-info">
              <img src="@/assets/image/my-video-play-btn.png" alt="" class="play-btn-icon"/>
              <span>{{ item.sum_view || 0 }}</span>
            </div>
          </div>
          <p 
            :class="{'dis': item.is_comment }"
            @click="toggleDialog(index, item.video_id)"
            class="evaluate-btn">{{ !item.is_comment ? '评价' : '已评价'}}</p>
        </div>
      </div>
    </div>

    <!-- 评分弹窗 -->
    <van-popup v-model="showDialog">
      <div class="popup-content">
        <img 
          @click="showDialog = false"
          src="@/assets/image/close-dialog-btn.png"
          alt="" class="close-btn"/>
        <div class="dialog-evaluate-title">
          您的评价会让视频做的更好！
        </div>
        <div class="evaluate-list">
          <div class="evaluate-item" @click="toggleEvaluate(1)">
            <img 
              v-if="evaluateVal === 1"
              src="@/assets/image/bad.png" alt=""/>
            <img v-else
              src="@/assets/image/bad-no.png" alt=""/>
            <span :class="{'active': evaluateVal === 1}">不适合我</span>
          </div>
          <div class="evaluate-item" @click="toggleEvaluate(2)">
            <img 
              v-if="evaluateVal === 2"
              src="@/assets/image/common.png" alt=""/>
            <img
              v-else
              src="@/assets/image/common-no.png" alt=""/>
            <span :class="{'active': evaluateVal === 2}">可以接受</span>
          </div>
          <div class="evaluate-item" @click="toggleEvaluate(3)">
            <img 
              v-if="evaluateVal === 3"
              src="@/assets/image/perfect.png" alt=""/>
            <img v-else
              src="@/assets/image/perfect-no.png" alt=""/>
            <span :class="{'active': evaluateVal === 3}">期望多推荐</span>
          </div>
        </div>
        <div class="dialog-tip">你的反馈将有助于提高我们对您的视频风格匹配度，更适合、更懂您</div>
        <div class="sure-btn" @click="doEvaluate">确定</div>
      </div>
    </van-popup>

    <div class="detail-dialog" v-if="showVideoDialog">
      <div 
        @click="closeVideoDialog"
        class="dialog-content" 
      >
        <div class="dialog-content-top">
          <div class="dialog-top">
            <img src="@/assets/image/dialog-back.png" alt="" class="back"/>
            <span class="dialog-title">详情</span>
          </div>
          <img :src="currentCover" alt="" v-if="!isPlaying"/>
          <video :src="videoUrl" class="preview-video" ref="video" v-else></video>
          <img 
            @click.stop="playVideo"
            v-if="!isPlaying"
            src="@/assets/image/play-media-btn.png" alt="" 
            class="play-btn"/>
        </div>
        <!-- <div class="download-btn" @click.stop="download">下载至相册</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { listPublishRecord, countMonthView, doComment } from '@/api/account'
import { getOssDomain } from '@/api/oss'
import { downloadByUrl } from '@/utils/index'
export default {
  data () {
    return {
      activeVideoId: -1,
      loading: false,
      currentIndex: 0,
      showDialog: false,
      showVideoDialog: false,
      evaluateVal: 3,
      list: [],
      videoUrl: '',
      currentCover: '',
      isPlaying: false,
      current_page: 1,
      page_size: 10,
      total: 0,
      detail: {
        current_month_view: 0,
        last_month_view: 0,
        sum_push: 0
      },
      evaluateDict: {
        '1': 'POOR',
        '2': 'MIDDLE',
        '3': 'GOOD'
      },
      oss_domain: '',
    }
  },
  async mounted () {
    if (!sessionStorage.getItem('oss_domain')) {
      const res = await getOssDomain()
      sessionStorage.setItem('oss_domain', res.domain)
      this.oss_domain = res.domain
    } else {
      this.oss_domain = sessionStorage.getItem('oss_domain')
    }
    this.getListPublishRecord()
    this.getDetail()
    document.title = '我的作品'
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll,true) // 监听页面滚动*/
  },
  methods: {
    download () {
      console.log('开始下载')
      downloadByUrl(this.videoUrl, '详情.mp4')
    },
    // 评价视频
    doEvaluate () {
      doComment({
        video_id: this.activeVideoId,
        type: this.evaluateDict[this.evaluateVal + '']
      }).then(res => {
        this.$set(this.list[this.currentIndex], 'is_comment', true)
        this.showDialog = false
      })
    },
    handleScroll (e) {
      if (this.loading) return
      const diff = 100
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
      if (scrollHeight - scrollTop- windowHeight < diff) {
        console.log('page myvideo  - 到底部啦')
        if (this.list.length < this.total) {
          this.loading = true
          this.current_page += 1
          this.getListPublishRecord()
        }
      }
    },
    getDetail () {
      countMonthView().then(res => {
        this.detail = res
      })
    },
    closeVideoDialog () {
      if (this.isPlaying) {
        this.$refs.video.pause()
      }
      this.showVideoDialog = false
      this.isPlaying = false
    },
    playVideo () {
      this.isPlaying = true
      this.$nextTick(() => {
        this.$refs.video.play()
      })
    },
    getListPublishRecord () {
      const { current_page, page_size} = this
      listPublishRecord({
        page: { current_page, page_size },
        account_id: sessionStorage.getItem('account_id')
      }).then(res => {
        res.list.forEach(item => {
          item.video_url = `${this.oss_domain}/${item.video_url}`,
          item.video_cover_url = `${this.oss_domain}/${item.video_cover_url}`
        })
        this.list = this.list.concat(res.list)
        this.total = res.total
        this.loading = false
      })
    },
    imagePreview (videoUrl, currentCover) {
      this.currentCover = currentCover
      this.videoUrl = videoUrl
      this.showVideoDialog = true
      // ImagePreview([imgUrl]);
    },
    toggleEvaluate (val) {
      this.evaluateVal = val
    },
    toggleDialog (index, video_id) {
      if (this.list[index].is_comment) return
      this.showDialog = true
      this.currentIndex = index
      this.activeVideoId = video_id
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll,true) // 监听页面滚动*/
  }
}
</script>

<style scoped>
.download-btn {
  width: 79.49vw;
  height: 10.67vw;
  line-height: 10.67vw;
  border-radius: 2.13vw;
  background: linear-gradient(98deg, #006EDD 0%, #009CEC 41%, #00A5A5 100%);
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  text-align: center;
  color: #FFFFFF;
}
.video-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-video {
  width: 100%;
}
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20.27vw;
  height: 20.27vw;
  z-index: 10;
}
.dialog-title {
  position: absolute;
  top: 3.2vw;
  left: 50%;
  transform: translateX(-50%);
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #FFFFFF;
}
.detail-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 2.13vw;
  background: rgba(0, 0, 0, 0.3);
}
.dialog-content {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}
.dialog-content-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 79.47vw;
  height: 147.73vw;
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 2.13vw;
  overflow: hidden;
  /* margin-bottom: 5.33vw; */
}

.back {
  position: absolute;
  left: 6.4vw;
  top: 4.8vw;
  width: 2.67vw;
  height: 2.67vw;
}
.dialog-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16vw;
  background: linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.00) 100%);
  border-radius: 2.13vw 2.13vw 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.my-video {
  padding-bottom: 21.33vw;
}
.close-btn {
  position: absolute;
  top: 3.73vw;
  right: 3.2vw;
  width: 2.93vw;
  height: 2.93vw;
}
::v-deep .van-overlay {
  background: rgba(0,0,0,0.3);
}
::v-deep .van-popup {
  border-radius: 3.2vw;
}
.sure-btn {
  width: 60.8vw;
  height: 8.53vw;
  margin: 0 auto;
  line-height: 8.53vw;
  border-radius: 1.07vw;
  background: #0A67FF;
  text-align: center;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: 500;
  color: #FFFFFF;
}
.dialog-tip {
  margin: 0 auto 2.13vw;
  width: 57.87vw;
  font-family: Source Han Sans CN;
  font-size: 2.67vw;
  line-height: 3.73vw;
  color: #CCCCCC;
}
.evaluate-list {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 6vw;
  margin-bottom: 10.67vw;
}
.evaluate-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Source Han Sans CN;
  font-size: 2.67vw;
  font-weight: normal;
  color: #666666;
}
.active {
  color: #0A67FF;
}
.evaluate-item > img {
  width: 10.67vw;
  height: 10.67vw;
  margin-bottom: 2.13vw;
}
.dialog-evaluate-title {
  margin-bottom: 8.53vw;
  text-align: center;
  font-family: Source Han Sans CN;
  font-size: 4.27vw;
  font-weight: 500;
  line-height: 6.4vw;
  color: #3D3D3D;
}
.popup-content {
  box-sizing: border-box;
  width: 71.73vw;
  height: 69.07vw;
  padding-top: 5.33vw;
  background: #ffffff;
}
.list {
  display: flex;
  flex-wrap: wrap;
  width: 89.6vw;
}
.evaluate-btn {
  width: 100%;
  height: 6.93vw;
  line-height: 6.93vw;
  text-align: center;
  background: #FFAA00;
  border-radius: 1.07vw;
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  color: #FFFFFF;
}
.evaluate-btn.dis {
  background: #E7E7E7;
}
.item-top {
  position: relative;
  height: 48vw;
  border-radius: 1.07vw;
  overflow: hidden;
  margin-bottom: 2.13vw;
  background-color: #000000;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}
.play-btn-icon {
  width: 3.2vw;
  height: 3.2vw;
  margin-right: 1.33vw;
}
.play-info {
  position: absolute;
  bottom: 1.87vw;
  left: 2.13vw;
  display: flex;
  align-items: center;
  height: 4.8vw;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 18px;
  color: #FFFFFF;
}
.title {
  padding-left: 2vw;
  margin-bottom: 1.07vw;
  font-family: Source Han Sans CN;
  font-size: 4.27vw;
  font-weight: bold;
  line-height: 7.47vw;
  color: #0072DE;
}
.item {
  position: relative;
  margin-bottom: 4.27vw;
  width: 27.73vw;
  margin-right: 3.2vw;
}
.item:nth-child(3n) {
  margin-right: 0;
}
.date {
  position: absolute;
  right: 1.07vw;
  top: 1.07vw;
  font-family: Source Sans Pro;
  font-size: 2.67vw;
  font-weight: 600;
  line-height: 4.27vw;
  color: #FFFFFF;
}
.title-line {
  position: relative;
  width: 100%;
  height: 1.07vw;
  margin-bottom: 5.33vw;
  border-radius: 0.53vw;
  background: #E6E6E6;
}
.title-line::after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 20.53vw;
  height: 1.07vw;
  border-radius: 0.53vw;
  background: linear-gradient(93deg, #006EDD 0%, #009CEC 41%, #00A5A5 100%);
}
.content {
  padding: 0 5.33vw;
  box-sizing: border-box;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 24vw;
  margin-bottom: 6.4vw;
  background: linear-gradient(180deg, #006EDD 0%, #009CEC 100%);
}
.count {
  margin-bottom: 3.47vw;
  font-family: Source Han Sans CN;
  font-size: 4.8vw;
  font-weight: 500;
  text-align: center;
  color: #FFFFFF;
}
.count.large {
  margin-bottom: 2.13vw;
  font-size: 6.4vw;
}
.top-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.count-label {
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: 500;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}
</style>